<template>
  <div class="overlay" v-show="isactive">
      <div class="con">
      <h2 class="title">新增 | 修改</h2>
      <div class="content">
      <table>
      <tr>
      <td>药品</td>
      <td><input type="text" v-model="modifylist.name"></td>
      </tr>
      <tr>
      <td>通用名称</td>
      <td><input type="text" v-model="modifylist.name_intro"></td>
      </tr>
      <tr>
      <td>拼音</td>
      <td><input type="text" v-model="modifylist.spell_intro"></td>
      
      </tr>
      <tr>
      <td>规格</td>
      
      <td><input type="text" v-model="modifylist.specification"></td>
        
      
      </td>
      </tr>
      <tr>
      <td>单位</td>
      <td>
      <label><input type="text" v-model="modifylist.unit" value=""></label>
      </td>
      </tr>
      <tr>
      <td>用法</td>
      <td>
      <label><input type="text" v-model="modifylist.employ" value=""></label>
      </td>
      </tr>
      <tr>
      <td>功能</td>
      <td>
      <label><input type="text" v-model="modifylist.action" value=""></label>
      </td>
      </tr>
      <tr>
      <td>批文号</td>
      <td>
      <label><input type="text" v-model="modifylist.coding" value=""></label>
      </td>
      </tr>
      <tr>
      <td>生产厂家</td>
      <td>
      <label><input type="text" v-model="modifylist.vendor" value=""></label>
      </td>
      </tr>
      </table>
      <p class="btngroup">
      <input type="button" class="btn" @click="changeActive" value="取消">
      <input type="button" class="btn" @click="modify" value="保存">
      </p>
      </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'model',
  props: ['list', 'isactive'],
  data () {
    return {
      msg: '青果科技开发'
    }
  },
  computed: {
				modifylist() {
					return this.list;
				}
			},
			methods: {
				changeActive() {
					this.$emit('change');
				},
				modify() {
					this.$emit('modify', this.modifylist);
				}
			}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btngroup{
  text-align: center;
}
  .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  background: rgba(0, 0, 0, 0.7);
}

.overlay td:first-child {
  width: 66px;
}

.overlay .con {
  position: absolute;
  width: 420px;
  min-height: 300px;
  background: #fff;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  /*margin-top: -150px;*/
  padding: 20px;
}
td{
  text-align: right;
  padding-right: 10px;
  font-weight: bold
}
input{
  margin: 5px 0;
}
</style>
